<template>
    <div class="cl-checklist">
        <div class="topbar">
            <span class="cancel">取消</span>
            <span class="title">选择考场</span>
            <span class="confirm">完成</span>
        </div>
        <div class="desc">您已选中<span>{{checkboxValue.length}}</span>个，最多可选<span>{{max}}</span>个</div>
        <div class="list" ref="list">
            <div class="line-wrapper">
                <label for="1" class="line border-1px">
                    <div class="l">
                        <div class="title">科目二第07考点马路</div>
                        <div class="address"><i class="el-icon-location-outline"></i>上海市宝山区保安公路2009号</div>
                    </div>
                    <div class="r"></div>
                </label>
                <input type="checkbox" id="1" @click="selectedItem($event)" v-model="checkboxValue" value="1" style="display:none">
            </div>
            <div class="line-wrapper">
                <label for="2" class="line border-1px">
                    <div class="l">
                        <div class="title">科目二第07考点马路</div>
                        <div class="address"><i class="el-icon-location-outline"></i>上海市宝山区保安公路2009号</div>
                    </div>
                    <div class="r"></div>
                </label>
                <input type="checkbox" id="2" @click="selectedItem($event)" v-model="checkboxValue" value="2" style="display:none">
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      checkboxValue: []
    }
  },
  methods: {
    selectedItem (event) {
      const labelNode = event.target.previousElementSibling
      const classList = labelNode.classList
      classList.contains('selected') ? classList.remove('selected') : classList.add('selected')
    }
  },
  props: {
    max: {
      type: Number,
      default: 1
    }
  },
  watch: {
    checkboxValue (val) {
      const listDom = this.$refs['list']
      const lines = listDom.querySelectorAll('.line-wrapper')
      if (val.length === this.max) {
        let item = null
        for (let i = 0; i < lines.length; i++) {
          item = lines[i]
          if (val.indexOf(lines[i].dataset.val) === -1) {
            item.children[i].classList.add('disabled')
            item.querySelector('input[type="checkbox"]').setAttribute('disabled', 'disabled')
          }
        }
      } else {
        let item = null
        for (let i = 0; i < lines.length; i++) {
          item = lines[i]
          if (item.children[i].classList.contains('disabled')) {
            item.children[i].classList.remove('disabled')
            item.querySelector('input[type="checkbox"]').removeAttribute('disabled')
          }
        }
      }
    }
  }
}
</script>
<style>
    body{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }
    .cl-checklist{
        overflow: hidden;
    }
    .topbar{
        height: 30px;
    }
    .desc{
        height: 30px;
        line-height: 30px;
        padding-right: 10px;
        font-size: 14px;
        text-align: right;
        color: rgb(159,159,159);
    }
    .list{
        max-height: 300px;
        font-size: 14px;
        padding: 10px 13px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .list .line {
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
    }
    .list .line .l{
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 90%;
    }
    .list .line .r{
        width: 20px;
        height: 20px;
        margin: 0 5px;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border:1px solid #9e9e9e;
        background-color: #fff;
        position: relative;
        z-index: 0;
    }
    .list .line.selected .l .title{
        color: #1799fa;
    }
    .list .line.selected .r{
        border: 1px solid #1799fa;
        background-color: #1799fa;
    }
    .list .line.selected .r::before{
        content: ' ';
        position: absolute;
        top: 4px;
        left: 4px;
        width: 12px;
        height: 12px;
        background-image: url(../assets/icon.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        z-index: 1;
    }
    .topbar{
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 45px;
        font-size: 16px;
        padding: 0 13px;
        border-bottom: 1px solid rgb(217,217,217);
    }
    .topbar .cancel{
        color: rgb(159,159,159);
    }
    .topbar .confirm{
        color: rgb(46,166,242);
    }
    .border-1px{
        position: relative;
    }
    .border-1px::after{
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid rgb(217,217,217);
        content: ' ';
    }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
        .border-1px::after {
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
        .border-1px::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        }
    }
</style>
